<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>VirtualXP</title>
		<meta property="og:title" content="VirtualXP"/>
		<meta property="og:url" content="https://lrusso.github.io/VirtualXP/VirtualXP.htm"/>
		<meta property="og:description" content="info@lrusso.com"/>
		<meta property="og:image" content="https://lrusso.github.io/VirtualXP/VirtualXPShare.png"/>
		<meta property="og:type" content="website"/>
		<meta property="og:site_name" content="VirtualXP"/>
		<meta name="theme-color" content="#000000"/>
		<meta name="mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<link rel="manifest" href="VirtualXP.json"/>
		<link rel="icon" sizes="16x16" type="image/png" href="VirtualXPFavIcon_16x16.png"/>
		<link rel="icon" sizes="192x192" type="image/png" href="VirtualXPFavIcon_192x192.png"/>
		<link rel="apple-touch-icon" href="">
		<link rel="apple-touch-startup-image" href="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<style>
			html,body{background-color:black;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:default}
			#canvas{position:fixed;left:0;right:0;top:0;bottom:0;height:100%;width:100%}

			.percentage{position:fixed;width:64px;height:64px;left:0;right:0;top:120px;bottom:0;margin:auto auto;border:0;font-family:Arial;font-weight:bold;font-size:20px;background-color:black;color:white;text-align:center}
			.pleasewait{position:fixed;width:64px;height:64px;left:0;right:0;top:-50px;bottom:0;margin:auto auto;border:0}
			.lds-spinner{color:white;display:inline-block;position:relative;width:64px;height:64px}
			.lds-spinner div{transform-origin:32px 32px;animation:lds-spinner 1.2s linear infinite}
			.lds-spinner div:after{content:" ";display:block;position:fixed;top:3px;left:29px;width:5px;height:14px;border-radius:20%;background:white}
			.lds-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}
			.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}
			.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}
			.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}
			.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}
			.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}
			.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}
			.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}
			.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}
			.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}
			.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}
			.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}
			@keyframes lds-spinner{0%{opacity:1}100%{opacity:0}}
		</style>
	</head>
	<body>
		<div class="pleasewait"><div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
		<div class="percentage"></div>
		<canvas id="canvas" height="640" width="480"></canvas>

		<script src="VirtualXPLoader.js"></script>
		<script>
			var finalResponse;

			// FUNCTION FOR GETTING THE ISO IMAGE
			function getISOImage()
				{
				// CREATING THE REQUEST
				var oReq = new XMLHttpRequest();

				// SETTING WHICH FILE MUST BE OBTAINED
				oReq.open("GET", "VirtualXP.iso", true);

				// SETTING THE RESPONSE TYPE
				oReq.responseType = "blob";

				// SETTING WHAT WILL HAPPEN WHEN THE REQUEST IS FULLY LOADED
				oReq.onload = function (oEvent)
					{
					// CHECKING IF THE REQUEST IT'S DONE
					if (oReq.readyState==oReq.DONE)
						{
						// CHECKING IF THE REQUEST STATUS
						if (oReq.status==200)
							{
							// GETTING THE RESPONSE CONTENT
							finalResponse = oReq.response;

							// SETTING THE OPTIONS FOR THE EMULATOR
							var opts = {reportSpeed: function(s){document.title = "VirtualXP - " + s + " MIPS";}};
							opts.mem = "192";
							opts.vgamem = "16";
							opts.fast = true;
							opts.bios = "VirtualXPBIOS.bin";
							opts.vgabios = "VirtualXPVGA.bin";
							opts.apic = false;
							opts.acpi = false;
							opts.pci = false;
							opts.pcivga = false;
							opts.floppy = false;
							opts.winnt_hack = true;
							opts.canvas = document.getElementById("canvas");
							opts["cda"] = new File(["empty.txt"], "filename");

							// CREATING THE EMULATOR
							var halfix = new Halfix(opts);
							halfix.init(function()
								{
								// RUNNING THE EMULATOR
								halfix.run();

								// FORCING TO UPDATE THE SCREEN EVERY 1 SECOND
								setInterval(function(){try{halfix.updateScreen();}catch(err){}}, 1000);

								// WAITING 5 SECONDS
								setTimeout(function()
									{
									// HIDING THE PLEASE WAIT ANIMATION AND THE PERCENTAGE
									document.getElementsByClassName("pleasewait")[0].style.display = "none";
									document.getElementsByClassName("percentage")[0].style.display = "none";
									},5000);
								});
							}
							else
							{
							// IF THERE IS AN ERROR, THE REQUEST IS EXECUTED ONE MORE TIME
							getISOImage();
							}
						}
					};

				// SETTING WHAT WILL HAPPEN WHEN THE REQUEST IS DOWNLOADING THE FILE
				oReq.onprogress = function (oEvent)
					{
					// CHECKING IF THERE IS A FILE SIZE
					if (oEvent.total>0)
						{
						// UPDATING THE PERCENTAGE LABEL
						document.getElementsByClassName("percentage")[0].innerHTML = Math.floor(oEvent.loaded * 100 / oEvent.total) + "%";
						}
					};

				// IF DURING THE REQUEST IS AN ERROR, THE REQUEST IS EXECUTED ONE MORE TIME
				oReq.onerror = function(){setTimeout(function(){getISOImage();},1000);};

				// IF DURING THE REQUEST IS A TIMEOUT, THE REQUEST IS EXECUTED ONE MORE TIME
				oReq.ontimeout = function(e){setTimeout(function(){getISOImage();},1000);};

				// EXECUTING THE REQUEST
				oReq.send(null);
				}

			function blockSpecialKeys(e)
				{
				try
					{
					// GETTING THE KEY EVENT
					e = e || window.event;

					// CHECKING IF IT ANY SPECIAL KEY IS PRESSED
					if (e.altKey || e.ctrlKey || e.metaKey || e.keyCode == 27)
						{
						// BLOCKING THE SPECIAL KEY
						e.preventDefault();
						e.stopPropagation();
						e.stopImmediatePropagation();
						}
					}
					catch(err)
					{
					}
				}

			// DISABLING THE CONTEXT MENU
			window.oncontextmenu = function()
				{
				return false;
				}

			// SETTING WHAT WILL HAPPEN WHEN THE WEBSITE IS FULLY LOADED
			window.addEventListener("load", function()
				{
				// SETTING WHAT WILL HAPPEN WHEN THE USER CLICKS ON THE CANVAS
				document.getElementById("canvas").addEventListener("click",function(event)
					{
					try
						{
						// REQUESTING POINTER LOCK ON THE CANVAS
						document.getElementById("canvas").requestPointerLock();
						}
						catch(err)
						{
						}
					});

				// BUGFIX FOR THE SPECIALS KEYS
				document.addEventListener("keydown",function(e){blockSpecialKeys(e)});
				document.addEventListener("keypress",function(e){blockSpecialKeys(e)});
				document.addEventListener("keyup", function(e){blockSpecialKeys(e)});

				// REQUESTING THE ISO IMAGE
				getISOImage();
				});

			if ("serviceWorker" in navigator)
				{
				navigator.serviceWorker.register("worker.js").then(function(registration)
					{
					// Registration successful
					//console.log("ServiceWorker registration successful with scope: " + registration.scope);
					}).catch(function(err)
					{
					// Registration failed
					//console.log("ServiceWorker registration failed: " + err);
					});
				}
		</script>
	</body>
</html>